<template>
    <view>
        <div class="tool">
            <div class="title">我的工具</div>
            <div class="list flex-a flex-b">
                <div class="item" @click="jumpTo('/packageA/pages/findPage/index?name=findPage')">
                    <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/25/142002.png" alt=""></div>
                    <div>预约记录</div>
                </div>
                <div class="item" @click="jumpTo('/packageA/pages/addressList/index')">
                    <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/25/142031.png" alt=""></div>
                    <div>地址管理</div>
                </div>
                <div class="item">
                    <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/25/142055.png" alt=""></div>
                    <div><nut-button open-type="contact">联系客服</nut-button></div>
                </div>
                <div class="item" @click="jumpTo('/packageA/pages/mypage/settleIn?name=myPage')">
                    <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/25/142133.png" alt=""></div>
                    <div>立即入驻</div>
                </div>
            </div>
        </div>
        <div class="service">
            <div class="title">常用服务</div>
            <div class="item flex-a flex-b" @click="jumpTo('/packageA/pages/notice/index')">
                <div class="flex-a">
                    <Notice color="#111334" size="16" />
                    <div>我的消息</div>
                    <text class="num" v-if="noticeNum > 0">{{ noticeNum }}</text>
                </div>
                <Right color="#D1D1D1" size="12" />
            </div>
            <div class="item flex-a flex-b" v-if="user.types == '1'"
                @click="jumpTo('/packageA/pages/manage/index?name=myPage')">
                <div class="flex-a">
                    <Setting color="#111334" size="16" />
                    <div>管理端</div>
                </div>
                <Right color="#D1D1D1" size="12" />
            </div>
        </div>
        <!-- <div class="flex-content">
            <nut-cell-group>
                <nut-cell :center="true" title="我的预约" is-link
                    @click="jumpTo('/packageA/pages/findPage/index?name=findPage')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/07/23/172810_2.png">
                        </image>
                    </template>
<template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
</nut-cell>
<nut-cell :center="true" title="地址管理" is-link @click="jumpTo('/packageA/pages/addressList/index')">
    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/07/23/172810.png">
                        </image>
                    </template>
    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
</nut-cell>
<div class="rows flex-a flex-b">
    <div class="left flex-a">
        <image style="width:20px;height: 20px;" src="https://cxj.szzkba.cn/upload/i/2024/08/27/153616.png">
        </image>
        <nut-button open-type="contact">联系客服</nut-button>
    </div>
    <image style="width:20px;height: 20px;" src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
    </image>
</div>
</nut-cell-group>
<nut-cell-group v-if="hasLogin">
    <nut-cell :center="true" title="立即入驻" v-if="user.types != '1'" is-link
        @click="jumpTo('/packageA/pages/mypage/settleIn?name=myPage')">
        <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/08/04/162512.png">
                        </image>
                    </template>
        <template v-slot:link>
                        <div v-if="user.types == '0'" style="color: #1886f3;">待审核</div>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
    </nut-cell>
    <nut-cell :center="true" title="管理端" is-link v-if="user.types == '1'"
        @click="jumpTo('/packageA/pages/manage/index?name=myPage')">
        <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/08/04/162805.png">
                        </image>
                    </template>
        <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
    </nut-cell>
</nut-cell-group>
<nut-cell-group v-if="hasLogin">
    <nut-cell :center="true" title="退出登录" is-link @click="loginOut">
        <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/08/14/103408.png">
                        </image>
                    </template>
        <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
    </nut-cell>
</nut-cell-group>
</div> -->
        <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
    </view>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import mitt from "../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { Cell, CellGroup } from '@nutui/nutui';
import { Service, Right, Notice, Setting } from '@nutui/icons-vue-taro'
import { getNotice } from '../../../../api/index';
export default {
    components: {
        'nut-cell': Cell,
        'nut-cell-group': CellGroup,
        Service,
        Right,
        Notice,
        Setting
    },
    setup() {
        const state = reactive({
            list: [
                {
                    shop_number: 0
                }
            ],
            msg: '',
            show: false,
            type: 'text',
            cover: false,
            hasLogin: false,
            user: {},
            noticeNum: 0,
        });
        onMounted(() => {
            mitt.on("hasLogin", (val) => {
                state.hasLogin = val
            })
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data ? res.data : {}
                    state.hasLogin = res.data ? true : false
                    console.log(state.user.uuid)
                    getNotice({ userId: res.data.uuid }).then(res => {
                        if (res.code == 0) {
                            state.noticeNum = res.data.list.length
                        }
                    })
                }
            })

        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const showToast = (msg) => {
            state.msg = msg
            state.show = true
        }
        const loginOut = () => {
            Taro.showModal({
                title: '提示',
                content: '是否确认退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        Taro.clearStorage()
                        mitt.emit("hasLogin", false)
                    }
                }
            })
        }
        const callPhone = () => {
            Taro.makePhoneCall({
                phoneNumber: '110' //仅为示例，并非真实的电话号码
            })
        }
        const openCustomer = () => {
            Taro.openCustomerServiceChat({
                extInfo: { url: '' },
                corpId: '',
                success: function (res) { }
            })
        }
        return {
            ...toRefs(state), jumpTo, showToast, loginOut, callPhone, openCustomer
        };
    }
};
</script>

<style lang="scss">
.nut-row {
    overflow: hidden;
}

.flex-content {
    margin: 5% auto 0;
    width: 96%;
    align-items: center;
    background-color: white;

    .rows {
        padding: 0 32rpx;

        .nut-button--default {
            border-color: transparent !important;
            background: transparent !important;
            padding: 0 450rpx 0 8rpx !important;
        }
    }
}

.flex-link-font {
    font-size: 24px;
    color: #8a8a8a;
}

.tool {
    width: 92%;
    margin: 20rpx auto 0;
    background: #fff;
    padding: 40rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .title {
        color: #070A2C;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 40rpx;
    }

    .list {
        font-size: 26rpx;
        color: #16183A;

        .item {
            text-align: center;

            .nut-button--default {
                border-color: transparent !important;
                background: transparent !important;
                color: #16183A !important;
                padding: 0 !important;
                height: 38rpx !important;
            }

            img {
                width: 60rpx;
                height: 60rpx;
            }
        }
    }
}

.service {
    width: 92%;
    margin: 20rpx auto 0;
    background: #fff;
    padding: 40rpx 40rpx 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .title {
        color: #070A2C;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 40rpx;
    }

    .item {
        margin-bottom: 30rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #F7F8FC;

        div {
            margin: 0 10rpx 0 20rpx;
            font-size: 24rpx;
            color: #212343;
        }

        .num {
            display: inline;
            width: 28rpx;
            text-align: center;
            height: 28rpx;
            line-height: 28rpx;
            border-radius: 50%;
            color: #fff;
            background: #D35153;
        }
    }
}
</style>